<template>
	<view class="">
		<!-- 帖子详情页 -->
		<commonList :item="info" isDetail @doComment='doComment' @doShare='doShare'
		@follow='follow' @doSupport='doSupport'>
			<view class="">{{info.content}}</view>
			<block v-for="(item, index) in img" :key="index">
				<image :src="item.url" class="w-100" mode="widthFix"
				@click="preview(index)"></image>
			</block>
		</commonList>
		<divider></divider>
		<!-- 评论 -->
		<view class="font-weight-bold mt-1 px-2 font-lg">最新评论</view>
		<view class="uni-comment-list px-2">
			<view class="uni-comment-face">
				<image src="/static/demo/demo66.jpg" style="width: 50rpx;height: 50rpx;"></image>
			</view>
			<view class="uni-comment-body">
				<view class="uni-comment-top">
					<text>小猫咪</text>
				</view>
				<view class="uni-comment-content" >支持DCloud</view>
				<view class="uni-comment-date">
					<view>2天前</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view style="height: 100rpx;"></view>
		<!-- 底部输入行 -->
		<bottomInput @submit='submit'></bottomInput>
		<moreShare ref="share"></moreShare>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	import bottomInput from '@/components/common/bottom-input.vue';
	import divider from '@/components/common/divider.vue';
	import moreShare from '@/components/common/more-share.vue';
	export default {
		components: {commonList,bottomInput,divider,moreShare},
		data() {
			return {
				info: {
					id: 0,
					user_id: 0,
					username:'',
					userpic:'',
					newstime:0,
					isFollow:false,
					title:"0",
					titlepic:"0",
					support:{
						type:'support',
						support_count:0,
						unsupport_count:0,
					},
					comment_count:0,
					share_num:0,
					content: ''
				},
				img: []
			}
		},
		onLoad(e) {
			if (e.detail) {
				this.__init(JSON.parse(e.detail))
			}
		},
		computed:{
			imgList() {
				// map返回一个新数组
				return this.img.map(item => item.url)
			}
		},
		// 点击导航栏
		onNavigationBarButtonTap() {
			this.$refs.share.open({
				title: this.info.title,
				shareText: this.info.content,
				href:"https://uniapp.dcloud.io",
				image: this.info.titlepic,
			})
		},
		// 点击返回 隐藏弹出层
		onBackPress() {
			this.$refs.share.close()
		},
		methods:{
			// 初始化数据
			__init(data) {
				// 修改标题
				uni.setNavigationBarTitle({
					title:data.title
				})
				this.info = data
				this.$H.get('/post/' + this.info.id).then(res => {
					this.info.content = res.detail.content
					this.img = res.detail.images
				})
			},
			doComment() {},
			doShare() {},
			follow() {
				this.info.isFollow = true
				uni.showToast({
					title:'关注成功'
				})
			},
			doSupport(e) {
				if (this.info.support.type === e.type) {
					return uni.showToast({
						title:'您已经操作过了，不能重复',
						icon:'none'
					})
				}
				let msg = e.type == 'support' ? '顶 + 1' : '踩 + 1'
				// 之前没操作过
				if (this.info.support.type == '') {
					this.info.support[e.type + '_count']++
				} else if (this.info.support.type == 'support' && e.type == 'unsupport') {
					this.info.support.support_count --
					this.info.support.unsupport_count ++
				} else if (this.info.support.type == 'unsupport' && e.type == 'support') {
					this.info.support.support_count ++
					this.info.support.unsupport_count --
				}
				this.info.support.type = e.type
				uni.showToast({
					title:msg
				})
			},
			// 预览图片
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.imgList
				});
			},
			submit(data) {
				console.log(data)
			}
		}
	}
</script>

<style>
</style>
